<!DOCTYPE html>
<html>

<head>
   
  <meta charset="utf-8" />
    <title>v-model记事本</title>
  
  <link type="text/css" href="css/style.css" rel="stylesheet" />
</head>

<body>
   <div id="box">
<div class="head">
  <h2>拾忆记事本</h2>
 <p>记录生活点点滴滴，写下生活每一个美好</p>
  <div class="input">
      <span>内容</span>
              <input type="text" placeholder="请输入你要记事的内容" v-model="word" @keyup.enter="input" />
                <span @click="add">确认</span>
              </div>
          </div>

        <ul class="list">
            <li v-for="(item,index) in arr" :key="index">
               
        <!-- 前面的序号 -->
                <span class="xh"> {{index+1}} </span>
                <span> {{item.word}}  </span>
               
        <!-- 关闭按钮 -->
                <span class="qc">
                      < img src="./img/icon.png" alt="" @click="del(index)">
                    </span>
              </li>
            <li>
                <b> 总条数 {{arr.length}}</b>
                <b @click="qc">清除</b>
              </li>
          </ul>
        <ul class="list">
            <li v-if="arr.length == 0"> 暂无数据 </li>
          </ul>
      </div>
    <script src="./js/vue.js"></script>

</body>
<script>
  new Vue({
    el: "#box",
    data() {
      return {
        word: '',
        arr: [],
      }
    },
    methods: {
      add() {

        if (!this.word) {
          return alert('内容不得为空')
        }
        var obj = {
          word: this.word
        }
        this.arr.push(obj)

        this.word = ''
      },

      del(index) {
        this.arr.splice(index, 1)
      },
      // 清除
      qc() {
        this.arr = []
      },
      // 键盘事件
      input() {
        // 非空判断
        if (!this.word) {
          return alert('内容不得为空')
        }
        // 创建对象
        var obj = {
          word: this.word
        }
        this.arr.push(obj)
        // 清空内容
        this.word = ''
      }
    },
  })
</script>

</html>